<template>
    <el-dialog v-model="visible" title="添加属性组" :close-on-click-modal="false" :close-on-press-escape="false">
        <el-form label-width="120px" :model="state.dataForm" ref="dataFormRef" @keyup.enter="state.getDataList()">
            <el-row>
                <el-form-item label="属性编号">
                    <el-input v-model="state.dataForm.groupCode" placeholder="请输入属性编号"></el-input>
                </el-form-item>
                <el-form-item label="属性组名称">
                    <el-input v-model="state.dataForm.groupName" placeholder="请输入属性组名称"></el-input>
                </el-form-item>
                <!-- 查询 -->
                <div style="margin-left: 20px;">
                    <el-button @click="state.getDataList()" type="primary">{{ $t("query") }}</el-button>
                </div>
                <!-- 重置 -->
                <div style="margin-left: 20px;">
                    <el-button type="info" @click="resetForm"  style="background: rgba(239, 244, 255, 1);border: 1px solid rgba(16, 98, 202, 1);color: #1062CA;border-radius: 5px;">重置</el-button>
                </div>
            </el-row>
            <el-table :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }"
                v-loading="state.dataListLoading" :data="state.dataList" border
                @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
                <el-table-column type="selection" align="center"></el-table-column>
                <el-table-column align="center" prop="groupCode" label="属性编号" width="160"
                    show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="groupName" label="属性组名称" width="130"
                    show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="attrName" label="包含属性" show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="updateAt" label="更新时间" width="210"
                    show-overflow-tooltip></el-table-column>
            </el-table>
            <!-- 页码 -->
            <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit"
                :total="state.total" layout="total, sizes, prev, pager, next, jumper"
                @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle">
            </el-pagination>
            <!-- 保存 取消 -->
            <div style="text-align: right;margin-top: 30px;">
                <el-button type="primary" @click="handleCurrent()">确定</el-button>
                <el-button @click="visible = false">取消</el-button>
            </div>
        </el-form>
    </el-dialog>
</template>
<script lang="ts" setup>
import useView from "@/hooks/useView";
import { nextTick, reactive, ref, toRefs, } from "vue";
import baseService from "@/service/baseService";
import { ElMessage } from "element-plus";
const view = reactive({
    getDataListURL: '/noc/attrgroup/list',
    getDataListIsPage: true,
    deleteURL: "/noc/attrgroup/delete",
    deleteIsBatch: false,
    dataForm: {
        ids: "",
        groupCode: "",
        groupName: "",
    },
});

const dataFormRef = ref();
const visible = ref(false);
const emit = defineEmits(['click', 'refreshDataList', 'refreshexhibitionlist'])

//初始化
const init = () => {
    visible.value = true
    // 重置表单数据
    if (dataFormRef.value) {
        dataFormRef.value.resetFields();
    }
};
const resetForm = () => {
    view.dataForm.ids = "";
    view.dataForm.groupCode = "";
    view.dataForm.groupName = "";
    state.getDataList();
};

/**
 * 确认
 */
const handleCurrent = () => {
    if (state.dataListSelections!.length === 0) {
        return ElMessage.warning("请选择至少一个属性组");
    }

    let ids: number[] = [];
    for (let i = 0; i < state.dataListSelections!.length; i++) {
        ids.push(state.dataListSelections![i].id);
    }

    state.dataForm.ids = ids.join(",");

    return baseService.post("/noc/attrgroup/select/", ids).then((res) => {
        if (res.code == 0) {
            // 重新获取数据列表
            visible.value = false;
            state.getDataList();
            // 将选中的属性组数据传递给父组件
            emit("refreshDataList", res.data);
            return ;
        } else {
            return ElMessage.error(res.msg || "设置失败");
        }
    });
}

const state = reactive({ ...useView(view), ...toRefs(view) });
state.limit = 20;
//页面进入执行
defineExpose({
    init
});

</script>
<style lang="scss" scoped>
.el-input {
    width: 217px;
}

::v-deep .el-table .cell {
    white-space: nowrap;
    font-size: 13px;
    height: 18px;
    line-height: 18px;
}
</style>
